<script setup>
import { ref } from 'vue'
import router from "@/router";
import { ElMessage } from "element-plus";
import Ask from "@/components/ask.vue"

const talks = ref("你好! 有什么可以帮助你的吗?")
const boxes = ref(JSON.parse(localStorage.getItem('ask-arr')))
const now = ref(null)

if (boxes.value == null) {
    boxes.value = []
} else {
    now.value = boxes.value[0].id
}


const exit = () => {
    localStorage.clear();
    router.push("/login");
    ElMessage.success("Exit Successfully");
}

const type = ref("Choose")
const choose = (event) => {
    const text = event.target.innerText
    type.value = text
}

const add = () => {
    let mx = -1
    for (let i = 0; i < boxes.value.length; i++) {
        if ( boxes.value[i].id > mx ) {
            mx = boxes.value[i].id
        }
    }
    mx++
    const newBox = {
        id: mx,
    };
    boxes.value.push(newBox);
    localStorage.setItem('ask-arr', JSON.stringify(boxes.value))
    now.value = mx
};

const remove = (index) => {
    boxes.value.splice(index, 1);
    // arr.value.splice(index, 1)
    const removeRecord = (page) => {
        localStorage.removeItem('msg'+page)
        localStorage.removeItem('len'+page)
        localStorage.setItem('ask-arr', JSON.stringify(boxes.value))
    }
    removeRecord(index)
};
</script>

<template>
    <div class="building">
        <div class="common-layout">
            <el-container class="container">
                <el-aside class="aside">
                    <el-row>
                        <el-col :span="8">
                            <svg style="margin-top:20px;margin-left:25px;" xmlns="http://www.w3.org/2000/svg" height="45px"
                                viewBox="0 0 671.194 680.2487">
                                <path
                                    d="M626.9464,278.4037a169.4492,169.4492,0,0,0-14.5642-139.187A171.3828,171.3828,0,0,0,427.7883,56.9841,169.45,169.45,0,0,0,299.9746.0034,171.3985,171.3985,0,0,0,136.4751,118.6719,169.5077,169.5077,0,0,0,23.1574,200.8775,171.41,171.41,0,0,0,44.2385,401.845,169.4564,169.4564,0,0,0,58.8021,541.0325a171.4,171.4,0,0,0,184.5945,82.2318A169.4474,169.4474,0,0,0,371.21,680.2454,171.4,171.4,0,0,0,534.7642,561.51a169.504,169.504,0,0,0,113.3175-82.2063,171.4116,171.4116,0,0,0-21.1353-200.9ZM371.2647,635.7758a127.1077,127.1077,0,0,1-81.6027-29.5024c1.0323-.5629,2.8435-1.556,4.0237-2.2788L429.13,525.7575a22.0226,22.0226,0,0,0,11.1306-19.27V315.5368l57.25,33.0567a2.0332,2.0332,0,0,1,1.1122,1.568V508.2972A127.64,127.64,0,0,1,371.2647,635.7758ZM97.3705,518.7985a127.0536,127.0536,0,0,1-15.2074-85.4256c1.0057.6037,2.7624,1.6768,4.0231,2.4012L221.63,514.01a22.04,22.04,0,0,0,22.2492,0L409.243,418.5281v66.1134a2.0529,2.0529,0,0,1-.818,1.7568l-136.92,79.0534a127.6145,127.6145,0,0,1-174.134-46.6532ZM61.7391,223.1114a127.0146,127.0146,0,0,1,66.3545-55.8944c0,1.1667-.067,3.2329-.067,4.6665V328.3561a22.0038,22.0038,0,0,0,11.1173,19.2578l165.3629,95.4695-57.2481,33.055a2.0549,2.0549,0,0,1-1.9319.1752l-136.933-79.1215A127.6139,127.6139,0,0,1,61.7391,223.1114ZM532.0959,332.5668,366.7308,237.0854l57.25-33.0431a2.0455,2.0455,0,0,1,1.93-.1735l136.934,79.0535a127.5047,127.5047,0,0,1-19.7,230.055V351.8247a21.9961,21.9961,0,0,0-11.0489-19.2579Zm56.9793-85.7589c-1.0051-.6174-2.7618-1.6769-4.0219-2.4L449.6072,166.1712a22.07,22.07,0,0,0-22.2475,0L261.9963,261.6543V195.5409a2.0529,2.0529,0,0,1,.818-1.7567l136.9205-78.988a127.4923,127.4923,0,0,1,189.34,132.0117ZM230.8716,364.6456,173.6082,331.589a2.0321,2.0321,0,0,1-1.1122-1.57V171.8835A127.4926,127.4926,0,0,1,381.5636,73.9884c-1.0322.5633-2.83,1.5558-4.0236,2.28L242.0957,154.5044a22.0025,22.0025,0,0,0-11.1306,19.2566Zm31.0975-67.0521L335.62,255.0559l73.6488,42.51v85.0481L335.62,425.1266l-73.6506-42.5122Z"
                                    style="fill:#FFFFFF" />
                            </svg>
                        </el-col>
                        <el-col :span="10">
                            <p class="fontA">预测助手</p>
                        </el-col>
                    </el-row>
                    <div class="newBox fontB" @click="add" style="cursor: pointer;">+ 创建新会话</div>
                    <div v-for="(box, index) in boxes" class="talk" :key="box.id" @click="() => {now = box.id}">
                        <el-row>
                            <span class="fontC">{{ talks }}</span>
                            <el-popconfirm width="220" confirm-button-text="是的" cancel-button-text="我再想想" :icon="InfoFilled"
                                icon-color="#626AEF" title="您确定要删除吗?" @confirm="() => remove(index)">
                                <template #reference>
                                    <span class="iconA">
                                        <el-icon style="cursor: pointer;">
                                            <Close />
                                        </el-icon>
                                    </span>
                                </template>
                            </el-popconfirm>
                        </el-row>
                    </div>
                </el-aside>
                <el-container>
                    <el-header class="header" style="position: relative;">
                        <!-- <el-button style="background: rebeccapurple;" @click="removeRecord">删除所有记录</el-button> -->
                        <div class="logout">
                            <el-icon style="margin-top: 25px;display: inline-block">
                                <SwitchButton @click="exit" />
                            </el-icon>&nbsp;
                            <div style="margin-top: 25px; cursor: pointer;" @click="exit">Logout</div>
                        </div>
                        <div class="type">
                            <el-dropdown>
                                <el-icon style="margin-top: 25px;cursor: pointer;display: inline-block;color: black;">
                                    <ArrowDown />
                                </el-icon>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item :icon="Plus" @click="choose">疾病预测</el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>&nbsp;
                            <div style="margin-top: 25px;">{{ type }}</div>
                        </div>
                    </el-header>
                    <el-main class="main">
                        <!-- 问答框部分 -->
                        <div v-for="pages in boxes">
                            <Ask v-if="pages.id == now" :id="pages.id"></Ask>
                        </div>
                    </el-main>
                </el-container>
            </el-container>
        </div>
    </div>
</template>

<style scoped>
.iconA {
    position: absolute;
    display: inline-block;
    margin-top: 2px;
    right: 2px;
}

.type {
    display: flex;
    align-items: center;
    width: 100px;
    position: absolute;
    bottom: 20px;
    right: 100px;
}

.logout {
    display: flex;
    align-items: center;
    width: 100px;
    position: absolute;
    bottom: 20px;
    right: 10px;
}

.building {
    background: url("../assets/backround.png");
    width: 100%;
    height: 100%;
    background-position: center center;
    background-size: cover;
    position: relative;
    position: fixed;
    background-size: 100% 100%;
}

.fontB {
    font-weight: bold;
    font-size: 15px;
}

.fontC {
    display: inline-block;
    line-height: 30px;
    text-align: left;
    margin-left: 5px;
    font-size: 12px;
}

.container {
    margin-top: 70px;
    margin-left: 170px;
    min-width: 1200px;
}

.talk {
    border-radius: 5px;
    width: 80%;
    height: 30px;
    margin: 10px auto;
    background-color: rgba(188, 245, 153, 0.8);
    text-align: center;
    line-height: 30px;
    box-shadow: 0 0 25px #909399;
    cursor: pointer;
}


.aside {
    background: url("../assets/welcome.png");
    width: 250px;
    height: 500px;
    background-position: center center;
    background-size: cover;
    margin-left: 100px;
    background-size: 100% 100%;
    border-radius: 50px 0 0 50px;
}

.newBox {
    border-radius: 10px;
    width: 80%;
    height: 30px;
    margin: auto auto;
    background: linear-gradient(90deg, #87CEEB, #98FB98);
    text-align: center;
    line-height: 30px;
}

.fontA {
    color: aliceblue;
    font-weight: bolder;
    font-size: 25px;
    font-family: "Helvetica Rounded", sans-serif;

}

.main {
    width: 730px;
    height: 430px;
    opacity: 1;
    box-shadow: 0 0 25px #909399;
    background-color: rgba(188, 245, 153, 0.3);
    border-radius: 0 0 50px 0;
    position: relative;
}

.header {
    width: 730px;
    height: 60px;
    opacity: 1;
    box-shadow: 0 0 10px #d1d9e9;
    background-color: #257b5e;
    border-radius: 0 50px 0 0;
}
</style>